<script setup lang="ts">
import { onMounted, computed, ref } from "vue";
import request from "@/utils/request.ts";
import { ElMessage } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import { require } from "@/utils/getFileUrl.ts";
import { useRouter } from "vue-router";

let gameList10 = ref();
let gameList12 = ref();
const router = useRouter();
let searchValue = ref(''); // 搜索框输入值

// 定义分组计算属性
const getCarouselGroups = computed(() => {
  if (!gameList12.value || gameList12.value.length === 0) {
    return [];
  }

  const groups = [];
  const gamesPerGroup = 3;

  for (let i = 0; i < gameList12.value.length; i += gamesPerGroup) {
    groups.push(gameList12.value.slice(i, i + gamesPerGroup));
  }

  return groups;
});

onMounted(() => {
  request.get("/getGame")
      .then(res => {
        gameList10.value = res.data.gameList10;
        gameList12.value = res.data.gameList12;
      })
      .catch(err => {
        ElMessage.error(err);
      });
});

/*点击“游戏”跳转至游戏详情页*/
const goDetails = (game) => {
  window.open(router.resolve({ path: "/details", query: { "game": JSON.stringify(game) } }).href);
};

/*点击“更多”跳转至游戏列表页*/
const goGamesList = () => {
  window.open(
      router.resolve({ path: "/gameslist" }).href,
      "_blank"
  );
};

</script>

<template>
  <div class="content myFlex-y">
    <!-- 新增搜索框区域 -->
    <div class="search-container myFlex-x">
      <el-input
          v-model="searchValue"
          style="width: 400px; height: 40px; margin-right: 10px;"
          size="large"
          placeholder="请输入游戏名称"
          :suffix-icon="Search"
      />
      <el-button class="search-button" type="primary" plain>搜索</el-button>
    </div>

    <div class="dr myFlex-y">
      <div class="dr_title myFlex-y">
        <span style="font-size: 30px">每日推荐</span>
        <span style="font-size: 18px" class="more" @click="goGamesList">更多</span>
      </div>
      <div class="dr_content myFlex-y">
        <div class="game" v-for="(game, index) in gameList10" :key="index" @click="goDetails(game)">
          <div class="game_card">
            <img :src="require('@/assets/img/' + game.img)">
            <div class="game_info">
              <h3>{{ game.name }}</h3>
              <p>{{ game.description }}</p>
              <div class="game_meta">
                <span>{{ game.type }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hg myFlex-y">
      <div class="hg_title myFlex-y">
        <span style="font-size: 25px">热门游戏</span>
        <span style="font-size: 18px" class="more" @click="goGamesList">更多</span>
      </div>
      <el-carousel :interval="5000" arrow="always" class="game-carousel">
        <el-carousel-item v-for="(group, groupIndex) in getCarouselGroups" :key="groupIndex">
          <div class="carousel-group">
            <div class="game" v-for="(game, index) in group" :key="index" @click="goDetails(game)">
              <div class="game_card">
                <img :src="require('@/assets/img/' + game.img)">
                <div class="game_info">
                  <h3>{{ game.name }}</h3>
                  <p>{{ game.description }}</p>
                  <div class="game_meta">
                    <span>{{ game.type }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="lb myFlex-y">
      <!-- 类别浏览区域 -->
    </div>
  </div>
</template>

<style scoped>
@import "@/assets/css/content.css";


</style>